//获取大盒子的集合 逐渐将需要用到的children集合赋值给变量，方便调用
var journalism_wrap = document.getElementById("journalism_wrap");
var inner = journalism_wrap.children[0];
var ul = inner.children[0];
var squareList = journalism_wrap.children[2];
var squareLists = squareList.children[0];
var squares = squareLists.children;
//获取需要移动的盒子宽度
var boxwidth = inner.offsetWidth;
//获取导航线的集合
var navline = journalism_wrap.children[1];

//提前将要循环判断的长度提前赋值 避免每循环一次就要访问一次长度
var squareslength = squares.length;

    //外循环给元素添加点击事件
    for(let i = 0 ; i < squareslength ; i++){
        //每循环一次就记录下标
        squares[i].index = i;
        //将点击到的元素添加点击事件
        squares[i].onclick = function(){
            //内循环将没点击的元素全部去掉topn类名
            for(var j = 0; j < squareslength ; j++){
                squares[j].className = "";
            }
            //将点击到的元素添加topn类名
            this.className = "topn";
            navline.style.left = 44 * (i +1)+3 +"px";
            //如果盒子后移（朝后移就是负的），就要获取到第几个元素的宽度在乘以当前的下标，如果是第三个下标，就往后移动三个盒子的距离
            var tager = -this.index*boxwidth;
            //调用移动函数，参数1:移动的盒子，参数2：如果后移需要用到的距离
            JournalisMove(ul,tager);
        }
    }
    /**
     * @param  idobj 需要移动的参数
     * @param  tager 如果条件不满足了 最后就清除定时器 将left值赋予盒子
     */
    function JournalisMove(idobj,tager) {
        //每次调用移动函数，都要清除定时器
        clearInterval(idobj.tim);
            //设置定时器 每1毫秒运行一次
            idobj.tim = setInterval(function() {
                //将需要移动的元素的offsetleft赋给变量leader
                var leader = idobj.offsetLeft;
                //该变量相当于速度
                var seep = 8;
                //如果元素的offsetleft值大于tager，就是往左边移动的，就判定速度为负，然后向左逐渐递增
                seep = leader < tager ? seep:-seep;
                    //如果offsetleft-tager的绝对值大于或者等于速度就继续运行,如果不满足条件就代表盒子移动完毕 然后将ofsetleft赋给盒子的style.left
                    if(Math.abs(leader - tager) >= Math.abs(seep)) {
                        leader = leader + seep;
                        idobj.style.left = leader + "px";
                        // console.log("程序运行"+idobj.offsetLeft);
                        
                    }else{
                        idobj.style.left = tager + "px";
                        clearInterval(idobj.tim);
                        //alert("程序已运行到"+tager);
                        //console.log("程序停止"+idobj.offsetLeft);
                    }
                        // console.log(leader);
        },1);
    }